<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>主题研究</title>
    <link href="http://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="public/lib/layer/css/layui.css">
    <link rel="stylesheet" href="public/css/public.css">
    <link rel="stylesheet" href="public/css/article.css">
</head>

<body>
    <div class="header">
        <div class="nav-contact">
            <div class="row">
                <ul class="address"></ul>
                <div class="logo"><a href="index.html"><img src="public/images/sdk_logo.jpg" alt=""></a></div>
            </div>
        </div>
        <div class="row nav-menu">
            <div class="inline-block menu"></div>
            <div class="inline-block tool-side">
                <!-- <input class="search-bar hide" type="text"><span class="inline-block search-btn"></span> -->
            </div>
        </div>
    </div>
    <div class="contact-body">
        <!-- 内容引导 -->
        <div class="content-boot">
            <div class="row">
                <div class="content-title"><img src="public/images/sdk_content_boot.png" alt=""></div>
                <div class="content-explain" id="J_content-explain"></div>
            </div>
        </div>
        <!-- 初级 -->

        <div class="content-title"><img src="public/images/sdk_bq.png" alt=""></div>
        <div class="report" id="J_report_0"></div>
        <!-- 中级 -->
        <div class="intermediate" id="J_report_1"></div>
        <!-- 高级 -->
        <div class="senior-presentation report" id="J_report_2"></div>
        <!-- 报告预约 -->
        <div class="reservation-wrap row">
            <div class="previous">
                <img src="public/images/sdk_sq.png" alt="">
                <div class="list-content" id="J_last_report">
                    <div class="list" id="J_last_report_0"></div>
                    <div class="list" id="J_last_report_1"></div>
                    <div class="list" id="J_last_report_2"></div>
                </div>
            </div>
            <div class="reservation">
                <img src="public/images/sdk_bg.png" alt="">
                <p>预约主题：
                    <input type="text">
                </p>
                <p>预约理由：
                    <input type="text">
                </p>
                <p>个人难题：
                    <input type="text">
                </p>
                <p>期望获得信息：</p>
                <textarea></textarea>
                <p>联系电话：
                    <input type="text">
                </p>
                <div class="btn">
                	<span id="J_submit">提交预约</span>
                </div>
            </div>
        </div>
        <!-- 预约老师 -->
        <div class="appointment"></div>
    </div>
    <!-- 页脚 -->
    <div class="footer"></div>
    <script id="J_product_tpl" type="text/html">
        <div class="row">
            <div class="lapping com-presentation">
                <div class="content-images">
                    <img src="{{G.defaultCover}}" data-lazyload-img="{{G.uploadurl+d.coverUrl}}" alt="">
                    <div class="cover"></div>
                </div>
                <div class="teacher-details">
                    <p>{{formatVal(d.teacherType)}}</p>
                    <div>{{formatVal(d.aliasName?d.aliasName:d.teacherName)}}</div>
                </div>
                <div class="describe-proment">
                    <h3>《{{formatVal(d.title)}}》</h3>
                    <div class="down-num">下载量：<span>{{d.downloadNumber}}</span>原价：<span class="line-through">{{formatVal(d.unitPrice)}}</span>现价：<span>{{formatVal(d.promotionsPrice)}}</span></div>
                    <div class="pro-outline">
                        <p>本期提纲: <br>{{formatOutline(formatVal(d.outline))}}</p>
                    </div>
                    {{# if(d.free||d.payed){ }}
                        <a class="download" href="{{G.uploadurl + d.downloadUrl}}" download="download">立即下载</a>
                    {{# }else{ }}
                        <div class="download J_download" data-id="{{d.productId}}">立即付费下载</div>
                    {{# }; }}
                </div>
            </div>
        </div>
    </script>
    <script id="J_last_report_tpl" type="text/html">
        <div class="porson-image">
            <img src="{{G.defaultCover}}" data-lazyload-img="{{G.uploadurl+d.coverUrl}}" alt="" class="coverUrl">
            <div class="free-tiem">{{formatFreeTime(d.free,d.freeTime)}}</div>
        </div>
        <div class="report-info">
            <p class="teacher-type">{{d.teacherType}}</p>
            <p class="name">{{d.aliasName?d.aliasName:d.teacherName}}</p>
            <p class="beforeres">《{{d.title}}》</p>
            <p class="rep-price">原价：<span class="old-price">{{formatVal(d.unitPrice)}}</span>现价：<span class="new-price">{{formatVal(d.promotionsPrice)}}</span></p>
            <p class="tac">下载量：<span class="new-price">{{d.downloadNumber}}</span></p>
            <p class="tac">
                <input type="button" value="{{d.free?'免费下载':'付费下载'}}" class="download-btn J_download" data-id="{{d.productId}}">
            </p>
        </div>
    </script>
    <script src="public/lib/layer/layui.all.js"></script>
    <script src="public/js/G.js"></script>
    <script src="public/js/user.js"></script>
    <script src="public/js/product.js"></script>
    <script src="public/js/productOrder.js"></script>
    <script src="public/js/rechargeApi.js"></script>
    <script src="public/js/rechargeOrder.js"></script>
    <script src="public/js/public.js"></script>
    <script src="http://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script>
    	contentGuideApi.getOne("主题精研", function(data){
    	    var html = "";
    	    for (var i = 0; i < data.length; i++) {
    	        var value = data[i].value;
    	        html += (i + 1) + "、" + value + "</br>";
    	    }
    	    html += '<a href="">浏览样稿>></a>';
    	    $("#J_content-explain").html(html);
    	})
    	$("#J_submit").click(function(){
    	    layer.msg("预约成功")
    	});

        ['B1','B2','B3'].forEach(function(val,index){
            G.get('api/product',{type: val,pageSize:1,pageId:1},function(data){
                console.log(data)
                laytpl($('#J_product_tpl').html()).render(data.list[0], function(html) {
                    $("#J_report_"+ index ).html(html)
                })
                lazyload()
            })
            G.get('api/product',{type: val,pageSize:1,pageId:2},function(data){
                console.log(data)
                laytpl($('#J_last_report_tpl').html()).render(data.list[0], function(html) {
                    $("#J_last_report_"+ index ).html(html)
                })
                lazyload()
            })
        })
        function formatFreeTime(free,freeTime){
            var str = '';
            if(free){
                str = '<span class="free">免费</span>'
            }else{
                str = '还剩<span class="deadline">'+new Date(freeTime - new Date().getTime()).getDate()+'</span>天免费'
            }
            return str;
        }

        $(document).on('click','.J_download',function(){
            var id = $(this).data('id');
            openPayLayer(id,'已取消支付')
        })
    </script>
</body>

</html>